<template>
  <div id="app">
    <router-view></router-view>
    <!-- tabbar -->
    <van-tabbar
      v-show="isShow"
      route
      active-color="#e40137"
      inactive-color="#b4b4bd"
    >
      <van-tabbar-item to="/company">
        <span>公司</span>
        <template #icon>
          <i class="iconfont">&#xe63d;</i>
        </template></van-tabbar-item
      >
      <van-tabbar-item to="/question" icon="search">
        <span>刷题</span>
        <template #icon>
          <i class="iconfont">&#xe63f;</i>
        </template></van-tabbar-item
      >
      <van-tabbar-item to="/find" icon="friends-o">
        <span>发现</span>
        <template #icon>
          <i class="iconfont">&#xe646;</i>
        </template></van-tabbar-item
      >
      <van-tabbar-item to="/my" icon="setting-o">
        <span>我的</span>
        <template #icon>
          <i class="iconfont">&#xe645;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { setLocal } from './utils/local'

export default defineComponent({
  name: 'App',
  setup: () => {
    const route = useRoute()

    const isShow = ref(route.meta.isShowTab)

    watch(route, newValue => {
      isShow.value = newValue.meta.isShowTab
    })

    return {
      isShow
    }
  },
  mounted () {
    const store = useStore()

    window.onbeforeunload = () => {
      if (store.getters.getToken) {
        setLocal('heimamm-mobile-token', store.getters.getToken)
      } else {
        setLocal('heimamm-mobile-token', '')
      }

      if (store.getters.getUserInfo) {
        setLocal(
          'heimamm-mobile-user',
          JSON.stringify(store.getters.getUserInfo)
        )
      } else {
        setLocal('heimamm-mobile-user', '')
      }
    }
  }
})
</script>

<style>
@import '@/style/iconfont/iconfont.css';
.iconfont {
  font-size: 28px;
}
html,
body,
#app {
  height: 100%;
}
body {
  background-color: #f7f4f5;
}
</style>
